<template>
	<view class="flex-col page">
		<view class="flex-col">
			<MyHeader title="兴趣爱好"></MyHeader>
			<view class="mt-8 flex-row items-center self-center section_4">
				<image class="image_7"
					src="https://ide.code.fun/api/image?token=676caa824ae84d001221be45&name=f6d6fe6cd199109d70663b7db3131274.png" />
				<input class="font text ml-11" placeholder="搜索您感兴趣的" v-model="inputSearch"></input>
			</view>
		</view>
		<view class="list" v-show="inputSearch.length">
			<view class="listItem" v-for="item in searchList" :key="item.id" @click="goGroupDetail(item)">
				{{item.name}}
			</view>
		</view>
		<view class="mt-14 flex-row group_2" v-show="!inputSearch.length">
			<view class="flex-col shrink-0 section_5">
				<view class="addModule" @click="addModule">+添加模块</view>
				<view v-for="(item2,index) in hobbyModuleList" :key="index" :class="getClass(item2)"> <text
						class="font_2 text_3" @click="chooseModule(item2)">{{item2.name}}</text>
				</view>
			</view>
			<view class="flex-col flex-1 self-start group_3 ml-13">
				<block v-for="(item,index) in circleitems" :key="index">
					<view @click="goGroupDetail(item)" class="flex-row items-center self-stretch group_5">
						<view class="flex-row items-center flex-1">
							<image class="shrink-0 image_8" :src="item.imageUrl" />
							<text class="font_3 ml-11">{{item.name}}</text>
						</view>
						<view class="ml-20 flex-col justify-start items-center shrink-0 text-wrapper">
							<text class="font">加群</text>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
	<up-popup :show="addModuleDialog" mode="center" :round="10" :safeAreaInsetBottom='false' :closeOnClickOverlay='true'
		@close='addModuleDialog=false'>
		<view class="moduleDialog">
			<up-input placeholder="请输入兴趣名称" border="surround" v-model="moduleValue"></up-input>
			<up-button class="confirmBtn" type="primary" text="确定" @click="confirmModule"></up-button>
			<view class="close" @click='addModuleDialog=false'>
				X
			</view>
		</view>
	</up-popup>
	<!-- 发布信息按钮 -->
	<!-- <addNewInfo go="/otherpages/hobby/addGroup/addGroup" id='hobbyId' /> -->
	<view class="addBtn" @click="addNewHobby">+</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		computed,
		watch
	} from 'vue';
	import {
		isLoginAndGo
	} from '@/utils';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		gethobbyListAPI,
		posthobbyApi,
		getcirclesListAPI,
		getcirclesinfoAPI
	} from '@/apis/hobby.js'


	const circleitems = ref([])
	const goGroupDetail = (item) => {
		console.log(item);
		uni.navigateTo({
			url: '/otherpages/hobby/groupDetail/groupDetail?id=' + item.id
		})
	}

	const hobbyModuleList = ref([])
	const getHobbyModuleList = async () => {
		const res = await gethobbyListAPI()
		hobbyModuleList.value = res.data.map((item) => {
			return {
				...item,
				select: false
			}
		})
		hobbyModuleList.value[0].select = true
		hobbyId.value = hobbyModuleList.value[0].id
		getcirclesList(hobbyModuleList.value[0].id)
	}
	getHobbyModuleList()
	const getClass = (item) => {
		return [
			'flex-col', 'justify-start', 'items-center', 'self-stretch', 'text-wrapper_2',
			item.select ? 'selected-background' : ''
		]
	}
	const hobbyId = ref(null)
	const chooseModule = (item2) => {
		hobbyId.value = item2.id
		hobbyModuleList.value.forEach(item => {
			if (item.id == item2.id) {
				item.select = true
				getcirclesList(item2.id)
			} else {
				item.select = false
			}
		})

	}
	const addModuleDialog = ref(false)
	const addModule = () => {
		addModuleDialog.value = true
	}
	const moduleValue = ref('')
	const confirmModule = async () => {
		if (moduleValue.value == '') {
			addModuleDialog.value = false
			return
		}
		const res = await posthobbyApi({
			name: moduleValue.value
		})
		if (res.code == 200) {
			addModuleDialog.value = false
			moduleValue.value = ''
			getHobbyModuleList()
		}
	}

	const getcirclesList = async (obj) => {
		const res = await getcirclesListAPI({
			hobbyId: obj
		})
		circleitems.value = res.data
	}
	onShow(async () => {
		await isLoginAndGo('/otherpages/hobby/index/index')
		getHobbyModuleList()

	})

	const addNewHobby = () => {
		uni.navigateTo({
			url: '/otherpages/hobby/addGroup/addGroup?hobbyId=' + hobbyId.value
		})
	}

	const inputSearch = ref('')
	const searchList = ref([])
	watch(inputSearch, (newValue, oldValue) => {
		if (newValue !== oldValue) {
			sendSearchRequest(newValue);
		}
	})

	const sendSearchRequest = async () => {
		const res = await getcirclesinfoAPI({
			name: inputSearch.value
		})
		if (inputSearch.value) {
			searchList.value = res.data.records
		} else {
			searchList.value = []
		}
	}
</script>

<style scoped lang="scss">
	.list {
		width: 100%;
		height: 100%;
		background-color: #fff;
		color: #333;
		font-size: 32rpx;
		z-index: 99;

		.listItem {
			padding-left: 20rpx;
			padding: 28rpx 16rpx 16rpx;
			border-bottom: solid 1rpx #e5e5e5;
		}
	}

	.addBtn {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50%;
		background-color: #4285f4;
		border: none;
		cursor: pointer;
		text-align: center;
		outline: none;
		color: white;
		font-size: 60rpx;
		position: fixed;
		right: 30rpx;
		bottom: 300rpx;
	}

	.moduleDialog {
		width: 500rpx;
		height: 290rpx;
		padding: 60rpx 20rpx 20rpx;
		position: relative;

		.close {
			position: absolute;
			top: 12rpx;
			right: 15rpx;
			color: #ccc;
			font-size: 38rpx;
		}

		.confirmBtn {
			margin-top: 40rpx;
		}
	}

	.addModule {
		color: #365d99;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 12rpx 42rpx 34rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 0 16rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		height: 64rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_4 {
		padding: 12rpx 40rpx;
		background-color: #f7f7f7;
		border-radius: 44rpx;
	}

	.image_7 {
		width: 44rpx;
		height: 44rpx;
	}

	.font {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.12rpx;
		color: #ffffff;
	}

	.text {
		margin-right: 308rpx;
		color: #cccccc;
		line-height: 22.22rpx;
	}

	.group_2 {
		border-top: solid 1rpx #e5e5e5;
	}

	.section_5 {
		padding: 36rpx 0 0;
		background-color: #f5f9ff;
		height: 100%;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		letter-spacing: 4rpx;
		line-height: 29.86rpx;
		color: #7591ba;
	}

	.text_2 {
		line-height: 29.22rpx;
	}

	.text-wrapper_2 {
		margin-top: 32rpx;
		padding: 32rpx 0;
		width: 176rpx;
	}

	.selected-background {
		background-color: #ffffff;
	}

	.text_3 {
		color: #365d99;
		line-height: 29.56rpx;
	}

	.text_4 {
		margin-top: 36rpx;
		line-height: 29.48rpx;
	}

	.text_5 {
		margin-top: 68rpx;
		line-height: 29.48rpx;
	}

	.text_6 {
		margin-top: 68rpx;
		line-height: 29.44rpx;
	}

	.text_7 {
		margin-top: 68rpx;
		line-height: 29.64rpx;
	}

	.text_8 {
		margin-top: 68rpx;
		line-height: 29.54rpx;
	}

	.group_3 {
		margin-right: 16rpx;
		margin-top: 28rpx;
	}

	.group_4 {
		padding: 0 10rpx 24rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.image_8 {
		border-radius: 12rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.86rpx;
		color: #333333;
	}

	.text-wrapper {
		margin-right: 12rpx;
		padding: 8rpx 0;
		background-color: #4c8eef;
		border-radius: 20rpx;
		width: 94rpx;
		height: 40rpx;
	}

	.group_5 {
		padding: 24rpx 10rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.image_9 {
		margin-top: 584rpx;
		width: 90rpx;
		height: 90rpx;
	}
</style>